<template>
  <div style="margin-top: 10px; max-width: 1280px;">
    <el-row :gutter="24">
      <el-col :span="21">
        <div class="ctitle">{{ loginAdmin.community.communityName }}</div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="7">
        <div class="ditem">
          <el-statistic title="社区注册老人数量">
            <template slot="formatter">
              <i class="el-icon-s-custom" style="color: #E6A23C; font-size: 32px;"></i>
              <span style="color: #606266;">{{ dashboard.ucont }}</span><span class="unit">人</span>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="ditem">
          <el-statistic title="待处理服务请求数">
            <template slot="formatter">
              <i class="el-icon-message-solid" style="color: #409EFF; font-size: 32px;"></i>
              <span style="color: #606266;">{{ dashboard.wcount }}</span><span class="unit">件</span>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="ditem">
          <el-statistic title="累计处理服务数">
            <template slot="formatter">
              <i class="el-icon-s-claim" style="color: #67C23A; font-size: 32px;"></i>
              <span style="color: #606266;">{{ dashboard.fcount }}</span><span class="unit">件</span>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { GetDashboardInfo } from '@/api/api.js'
  export default {
    data() {
      return {
        dashboard: {},
        loginAdmin: null
      };
    },
    created() {
      this.getdata({})
      this.loginAdmin = JSON.parse(localStorage.getItem('LoginAdmin'))
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      // 获取房间列表
      getdata(parameter) {
        this.loading = true;
        GetDashboardInfo(parameter)
          .then((res) => {
            this.loading = false;
            console.log(res)
            this.dashboard=res.data
          })
          .catch((err) => {
            this.editFormVisible = false;
            this.loading = false;
            this.$message.error("获取数据失败，请稍后再试！");
          });
      },
    }
  }
</script>
<style scoped>
  .like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
  .el-statistic .con .number{
    font-size: 32px;
    padding: 10px 4px;
  }
  .remark{
    font-size: 14px; color: #909399;
  }
  .remark .tip{
    padding: 4px 25px;
  }
  .ditem a{
    text-decoration: none;
  }
  .ditem .unit{
    color: #888;
    font-size: 18px;
    padding-left: 5px;
  }
  .ditem .el-statistic .head{
    margin-bottom: 10px;
  }
  .ctitle{
    font-size: 22px;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 20px;
    color: #555;
  }
</style>